<template>
  <div class="double-dan-record">
    <HeaderTop title="Withdrawals Record" backColor="#EC5958" color="white" backIconType="white"></HeaderTop>
    <ul class="double-dan-record-cont" v-if="list.length > 0">
      <li class="items" v-for="(item, index) in list" :key="index">
        <div><span>Withdraw</span><strong class="price">{{item.withdrawAmount | formatCurrency(',')}}</strong></div>
        <div>
          <span class="times">{{item.applyTime}}</span>
          <span v-if="item.actionStatus === 4" class='error'>{{status[item.actionStatus - 1]}}</span>
          <span v-else-if="item.actionStatus === 5" class='made'>{{status[item.actionStatus - 1]}}</span>
          <span v-else class='under'>{{status[item.actionStatus - 1]}}</span>
          <!-- <span class="made" v-else>Payment has been made</span> -->
        </div>
      </li>
    </ul>
    <div class="double-dan-record-empty" v-else>
      <img src="~@/assets/imgs/market/dan_empty.png" alt="">
      <p>No withdrawal record</p>
    </div>
  </div>
</template>

<script>
import HeaderTop from '@/components/header-top'
import dateFormat from '@/libs/filters/format-date'
export default {
  components:{
    HeaderTop
  },
  data () {
    return {
      list: [],
      // 1 待提现 2 提现中 3 提现失败 4 提现拒绝 5 提现成功  除了4/5 其余都是审核中
      status: ['under review','under review', 'under review', 'Withdrawal failed', 'Withdraw successfully']
    }
  },
  created () {
    this.getWithdrawalApplyList()
  },
  methods: {
    async getWithdrawalApplyList () {
      const user = this.$storage.get('user')
      this.$hybrid.action('ee', {
        content: 'withdrawRecord_page_show',
        value: {
          userid: user.userId || ''
        }
      })
      const res = await this.$api.withdrawalApplyList({ userPhone: user.phone})
      const { status, error, data } = res
      if (status === '1' && error === '00000000' && data.length > 0) {
        this.list = data.map(item => {
          console.log(item.applyTime)
          return { ...item, applyTime: dateFormat(item.applyTime, ('MM/dd/yyyy hh:mm:ss')) }
        })
      }
    }
  }
}
</script>

<style lang='scss'>
.double-dan-record {
  min-height: 100vh;
  position: relative;
  background-color: #F5F5F5;
  padding: 148px 32px 32px;
  &-cont {
    border-radius: 16px;
    padding: 0 32px;
    background-color: #fff;
    & > .items {
      border-bottom: 2px solid #F5F5F5;
      color: #222;
      font-size: 32px;
      padding: 32px 0 22px;
      & > div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        &:last-child {
          margin-top: 14px;
        }
      }
      &:last-child {
        border-bottom: 0;
      }
      .price {
        font-size: 40px;
        font-weight: bold;
      }
      .times {
        color: #999;
        font-size: 28px;
      }
      .under, .made, .error {
        font-size: 24px;
        padding: 8px;
      }
      .under {
        color: #1778F9;
        background-color: #E8F1FF;
      }
      .made {
        color: #10A82A;
        background-color: #EDFAEE;
      }
      .error {
        color: #EC5958;
        background-color: #EC595820;
      }
    }
  }
  &-empty {
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #222;
    font-size: 32px;
    & > img {
      width: 360px;
      margin-bottom: 40px;
    }
  }
}
</style>